<template>
  <van-action-sheet @close="close" v-model="editshow" title="频道管理">
    <!-- 我的频道 -->
    <div class="content">
      <div class="title">
        <span class="my-channel">我的频道</span>
        <!-- 编辑按钮 -->
        <van-button
          @click="isShow = !isShow"
          color="#d0355d"
          size="small"
          class="button-box"
          >{{ isShow == true ? '取消' : '编辑' }}</van-button
        >
      </div>
      <van-grid>
        <van-grid-item v-for="(item, index) in ownList" :key="item.id">
          <template>
            <span
              :class="{ active: index == value }"
              @click="addHighlight(index)"
              >{{ item.name }}</span
            >
            <van-icon
              name="clear"
              color="#d0355d"
              class="del-icon"
              size="16"
              v-show="isShow && !index == 0"
              @click="delChannel(index)"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道 -->
    <div class="content">
      <div class="title">
        <span class="my-channel">可选频道</span>
      </div>
      <van-grid>
        <van-grid-item v-for="item in filterChannel" :key="item.indicator">
          <template>
            <span @click="intoChannle(item)">{{ item.name }}</span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script>
import { saveChannelsAPI } from '@/api/channels'
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
      require: true
    },
    // 用户选择的频道
    ownList: {
      type: Array,
      require: true
    },
    // 可选的频道
    allList: {
      type: Array,
      require: true
    },
    value: {
      type: Number,
      require: true,
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      editshow: false,
      channelsList: []
    }
  },
  methods: {
    // 点击可选的频道 然后在我的频道加上
    async intoChannle(item) {
      this.ownList.push(item)
      if (this.$store.state.tokenObj.token) {
        const channels = this.ownList.map((v, index) => {
          return {
            id: v.id,
            seq: index
          }
        })
        await saveChannelsAPI({
          channels
        })
      } else {
        localStorage.setItem('channels', JSON.stringify(this.ownList))
      }
    },
    // 点击删除功能
    async delChannel(index) {
      this.ownList.splice(index, 1)
      if (index < this.value) {
        this.$emit('input', this.value - 1)
      }
      if (this.$store.state.tokenObj.token) {
        const channels = this.ownList.map((v, index) => {
          return {
            id: v.id,
            seq: index
          }
        })
        await saveChannelsAPI({
          channels
        })
      } else {
        localStorage.setItem('channels', JSON.stringify(this.ownList))
      }
    },
    // 双向高亮功能
    addHighlight(index) {
      this.$emit('input', index)
      this.$emit('update:show', false)
    },
    close() {
      this.$emit('update:show', false)
    }
  },
  watch: {
    show(newval) {
      this.editshow = newval
    }
  },
  computed: {
    filterChannel() {
      return this.allList.filter(v => {
        let idx = this.ownList.findIndex(val => {
          if (v.id == val.id) {
            return true
          }
        })
        return idx == -1
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-action-sheet__header {
  margin-top: 5px;
  font-size: 20px;
  font-weight: 700;
}
.content {
  padding: 15px;
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .my-channel {
      font-size: 16px;
      font-weight: 600;
    }
    .button-box {
      margin-top: 10px;
      width: 50px;
      height: 26px;
      border-radius: 6px;
    }
  }
  .del-icon {
    position: absolute;
    top: 4px;
    right: 3px;
  }
}
.active {
  color: #d0355d;
}
</style>
